<template>
  <span
    class="button-comp"
    :class="classObj"
    @click="handleClick"
    :data-text="text"
  >{{center?'':text}}</span>
</template>

<script>
export default {
  name: 'button-comp',
  props: {
    text: { type: String, required: true },
    size: String, // mini, large
    fill: Boolean,
    center: Boolean,
    handleClick: { type: Function, required: false, default: () => {} }
  },
  computed: {
    classObj() {
      const obj = {}
      if (this.size === 'mini' || this.size === 'large') {
        obj[this.size] = true
      }
      if (this.fill) {
        obj['fill'] = true
      }
      if (this.center) {
        obj['center'] = true
      }
      return obj
    }
  }
}
</script>

<style lang="stylus" scoped>
.button-comp {
  display: inline-block;
  text-align: center;
  padding: 5px 10px;
  font-size: 16px;
  background-color: $main-color;
  color: #fff;
  border-radius: 5px;

  &.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background-color: transparent;

    &::before {
      display: inline-block;
      content: attr(data-text);
      padding: 5px 10px;
      background-color: $main-color;
      border-radius: 5px;
    }
  }

  &.mini {
    font-size: 12px;
  }

  &.large {
    padding: 6px 12px;
    font-size: 22px;
  }

  &.fill {
    display: block;
    margin: 20px 16px;
  }
}
</style>
